<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <div>
      <a-list
        v-if="comments.length"
        :dataSource="comments"
        :header="`${comments.length}  条记录`"
        itemLayout="horizontal"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-comment
            :author="item.createBy"
            :content="item.content"
            :datetime="item.createTime"
          >
          </a-comment>
        </a-list-item>
      </a-list>
      <a-comment>
        <div slot="content">
          <a-form :form="form">
            <a-row :gutter="24">
              <a-col :span="5">
                <a-form-item label="后续处理">
                  <a-switch size="small" v-model="checkStatus"  @change="handleProcessStatus()"/>
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="标签">
                  <a-input placeholder="请输入可选值列表，以逗号隔开" v-decorator="['processTag', {}]" style="width:70%"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="提醒时间">
                  <a-date-picker format="YYYY-MM-DD" v-decorator="['processRemindTime', {}]"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item>
              <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
            </a-form-item>
            <a-form-item align="right">
              <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
                处理备注
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-comment>
    </div>
  </a-drawer>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import { getAction } from '@/api/manage'
  import moment from 'moment';
  import pick from 'lodash.pick'

  export default {
    name: 'OmsOrderProcessMemoModal',
    components: {},
    data() {
      return {
        title:"订单跟进",
        comments: [],
        submitting: false,
        checkStatus: false,
        value: '',
        moment,
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        model: {},
        url: {
          listByOrderId: '/oms/omsOrderProcessMemo/listByOrderId',
          add: "/oms/omsOrderProcessMemo/add",
        }
      }
    },
    created() {
    },
    methods: {
      handleSubmit() {
        if (!this.model.id) {
          return;
        }
        this.submitting = true;
        this.form.validateFields((err, values) => {
          if (!err) {

            let formData = Object.assign({}, values);
            formData.content = this.value;
            formData.orderId = this.model.id;
            formData.processStatus = this.model.processStatus;
            formData.processRemindTime = formData.processRemindTime?formData.processRemindTime.format('YYYY-MM-DD HH:mm:ss'):null;
            //时间格式化
            httpAction(this.url.add,formData,'post').then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.value = '';
                this.loadProcessData();
                this.$emit('ok');
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.submitting = false;
            });
          }
        })
      },
      handleChange(e) {
        this.value = e.target.value;
      },
      show(record) {
        this.visible = true
        this.model = Object.assign({}, record);
        //console.log('this.model.processStatus',this.model.processStatus)
        if(this.model.processStatus === null  || this.model.processStatus === '' || this.model.processStatus === undefined){
          this.model.processStatus = 0;
          this.checkStatus = false;
        } else {
          this.checkStatus = false;
          if (this.model.processStatus == 1){
            this.checkStatus = true;
          }
        }
        if(this.model.processTag === null  || this.model.processTag === '' || this.model.processTag === undefined){
          this.model.processTag = '';
        }

        if(this.model.processRemindTime === null  || this.model.processRemindTime === '' || this.model.processRemindTime === undefined){
          this.model.processStatus = '';
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'processTag', 'processRemindTime' ))
          // 时间格式化
          this.form.setFieldsValue({ processRemindTime: this.model.processRemindTime ? moment(this.model.processRemindTime) : null })
        })

        // 加载子表数据
        if (this.model.id) {
          console.log(this.model.id)
          this.loadProcessData();
        }
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      loadProcessData() {
        var params = { id: this.model.id }
        this.loading = true
        this.comments = []
        getAction(this.url.listByOrderId, params).then((res) => {
          if (res.success) {
            this.comments = res.result
          }
          this.loading = false
        })
      },
      handleCancel() {
        this.close()
      },
      handleProcessStatus () {
        if (this.checkStatus)
        {
          this.model.processStatus = 1;
        } else {
          this.model.processStatus = 2;
        }
        console.log(this.model.processStatus == 1)
      },
    }
  }
</script>

<style lang="less" scoped>
</style>